<template>
	<view class="main">
		<!-- <view class="title">
			约麻
		</view> -->
		
		<view class="title">
			修改密码
		</view>
		<view class="tips ">
			超多产品等你探索
		</view>
		
		<view class="ipt xflex-x-between">
			<input type="text" class="xflex1" :password="isPaw" v-model="form.password" placeholder="请输入新密码" />
			<image class="ipt-icon" v-if="isPaw" @click="isPaw = !isPaw" src="/static/image/icon_bxx.png" mode=""></image>
			<image class="ipt-icon" v-if="!isPaw" @click="isPaw = !isPaw" src="/static/image/icon_xx.png" mode=""></image>
		</view>
		
		<view class="ipt xflex-x-between">
			<input type="text" class="xflex1" :password="isPaw1" v-model="form.pwd" placeholder="请再次输入密码" />
			<image class="ipt-icon" v-if="isPaw1" @click="isPaw1 = !isPaw1" src="/static/image/icon_bxx.png" mode=""></image>
			<image class="ipt-icon" v-if="!isPaw1" @click="isPaw1 = !isPaw1" src="/static/image/icon_xx.png" mode=""></image>
		</view>
		
		<view class="btn" :class="form.password && form.pwd?'active':''" @click="sub">
			确定
		</view>
		<view class="xflex-x accord">
			<!-- <view class="flex">
				
				<image class="accord-img" @click="ischecjk()" :src="`/static/image/gouxuan${!checked?1:2}.png`" mode="">
				</image>
			</view> -->
			<!-- <view class="accord-text">
				我已阅读并同意
				<text @click="topage('/pages/index/agreement?title=用户协议&type=user_protoco')">《用户服务协议》</text>
				和
				<text @click="topage('/pages/index/agreement?title=隐私政策&type=privacy_policy')">《隐私政策》</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import {
		updatePwd,
	
	} from '@/network/home.js'
	import {
		topage
	} from '@/utils/common.js'
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	
	// 密码是否显示
	let isPaw = ref(true)
	let isPaw1 = ref(true)
	
	// 是否同意协议
	let checked = ref(true)
	
	function ischecjk() {
		checked.value = !checked.value
	}
	
	// 注册
	let form = reactive({
		username:'',
		password:'',
		pwd:""
	})
	// 登录
	function sub(e) {
		console.log(form.password!=form.pwd);
		if(form.password != form.pwd){
			uni.showToast({
				icon:"none",
				title:"两次密码不一致"
			})
			return
		}
		uni.showLoading({
			title: '加载中'
		});
		updatePwd({
			password:form.password,
			repassword:form.pwd
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:"修改成功,请重新登录"
			}),
			setTimeout(()=>{
				uni.clearStorage()
				uni.reLaunch({
					url:"/pages/index/login"
				})
			},1500)
		})
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.main{
		padding: 32rpx 60rpx;
	}
	.title {
		width: 100%;
		height: 59rpx;
		font-size: 62rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		// line-height: 40rpx;
		margin-top: 32rpx;
	}
	.tips {

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 40rpx;
		margin-top: 36rpx;
		margin-bottom: 161rpx;
	}
	.ipt {
		// width: 630rpx;
		// height: 110rpx;
		background: #F3F3F3;
		border-radius: 10rpx;
		padding: 38rpx 33rpx;
		margin-bottom: 36rpx;
		&:nth-child(1){
			margin-top: 161rpx;
		}
		&-icon{
			width: 40rpx;
			height: 40rpx;
		}
		// &>input{
			
		// }
	}
	.btn {
		width: 630rpx;
		height: 110rpx;
		background: #CCCCCC;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 110rpx;
		text-align: center;
	}
	.accord {
		margin-top: 200rpx;

		&-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}

		&-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;

			&>text {
				color: #ff3e00;
			}
		}
	}

	.ring {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1upx solid #909090;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.active {
		background-color: #3F7233;
		color: #eee;
	}
	
</style>